<template>
  <!-- 手写板-签名签字  https://ext.dcloud.net.cn/plugin?id=4354-->
  <view>
    <view class='recruit-canvas'>
      <view class="canvas-box" ref="canvasRef">
        <l-signature
            disableScroll
            :backgroundColor="'rgba(255,255,255,0)'"
            ref="signatureRef"
            :penColor="'rgb(0, 0, 1)'"
            :penSize="7"
            :openSmooth="true"
            :landscape="true"
        ></l-signature>
      </view>
      <view class="btn-box flex-row">
        <span class="del-btn" @click="clearCanvasHandle">清除</span>
        <span class="sure-btn" @click="makeCanvasHandle">确认</span>
      </view>
    </view>
  </view>
</template>

<script>

import {getQueryObject} from "@/utils";
import {toSaveQrSeal, toSetQrScanned} from "@/api/ec/person/user/qrCode";

export default {
  name: 'SealPersonAdd',
  data() {
    return {
      // 地址栏参数
      urlQuery: getQueryObject(window.location.href),
    }
  },
  created() {
    /** 标记二维码已扫描状态 */
    toSetQrScanned(this.urlQuery);
  },
  methods: {
    /** 清除按钮点击 */
    clearCanvasHandle() {
      this.$refs.signatureRef.clear();
    },
    /** 确定按钮点击 */
    makeCanvasHandle() {
      this.$refs.signatureRef.canvasToTempFilePath({
        success: (res) => {
          // 是否为空画板 无签名
          if (res.isEmpty) {
            this.$modal.msgError("请先绘制签名！")
            return;
          }
          // 提交签名图片
          let mobile = this.urlQuery.mobile;
          if (mobile == null || mobile == "") {
            mobile = this.$store.getters.staffInfo.mobile;
          }
          let verifyCode = this.urlQuery.verifyCode;
          const query = {qrSealBase64: res.tempFilePath, mobile: mobile, verifyCode: verifyCode};
          this.$modal.loading();
          toSaveQrSeal(query).then(response => {
            uni.$emit('refreshSealPersonData');
            uni.hideLoading();
            uni.navigateBack(1)
          }).catch(() => {
            uni.hideLoading();
          });
        }
      });
    }
  }
}
</script>

<style lang='css' scoped>
.recruit-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.recruit-canvas .canvas-box,
.recruit-canvas .btn-box {
  position: absolute;
  top: 50%;
  z-index: 100;
}

.recruit-canvas .btn-box {
  left: -22%;
  z-index: 1000;
  text-align: center;
  transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.recruit-canvas .btn-box .del-btn,
.recruit-canvas .btn-box .sure-btn {
  display: inline-block;
  width: 100px;
  height: 35px;
  margin: 0 10px;
  line-height: 35px;
  border-radius: 6px;
  background-color: #fff;
}

.recruit-canvas .btn-box .del-btn {
  color: #00A660;
  background: #ecf5ff;
  border-color: #e6f6ef;
  border: 1px solid #99dbbf;
}

.recruit-canvas .btn-box .sure-btn {
  color: #fff;
  background-color: #00A660;
  border-color: #00A660;
}

.recruit-canvas .canvas-box {
  left: 20%;
  height: 98vh;
  width: 75vw;
  overflow: hidden;
  border: 1px dashed #D4D4D4;
  transform: translateY(-50%);
  background-color: #fff;
}

@media screen and (orientation: portrait) {
  /*竖屏 css*/
}

@media screen and (orientation: landscape) {
  /*横屏 css*/
  .recruit-canvas .canvas-box {
    top: 0px;
    left: 10%;
    width: 80vw;
    height: 70vh;
    transform: translateY(0);
  }

  .recruit-canvas .btn-box {
    width: 60%;
    left: 20%;
    top: 86%;
    transform: rotate(0);
  }
}
</style>
